<template>
  <main class="c-living" v-show="media">
    <section class="living-contains" :style="mediaBigPic">
      <img :src="media.poster" class= "toptic-media " >
      <div class="living-mask"></div>
      <div class="living-title">
        <span class="shorttitle" v-text="media.title"></span>
        <span class="pipe">|</span>
        <span class="num">{{media.playCount}}人</span>
      </div>
      <section class="living-barrage-wrapper" ref="barrages">
        <ul class="living-barrage" ref="barragesUp" v-if="barrages">
          <li class="living-barrage_item" v-for="item in barrages">
            <span class="title">{{item.nickname}}</span>
            <span class="message">{{item.comments}}</span>
          </li>
        </ul>
        <ul class="living-barrage" ref="barragesDown" v-if="barragesChange">
          <li class="living-barrage_item" v-for="item in barragesChange">
            <span class="title">{{item.nickname}}</span>
            <span class="message">{{item.comments}}</span>
          </li>
        </ul>
      </section>
      <div class="c-living_download">
        <p>
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054">
            <span v-if="media.isChargeable">购买观看劵 {{ media.price }}</span>
            <span v-else>现在去微鲸VR<br>体验高清全景直播</span></a>
        </p>
      </div>
      <section class="living-end" v-if="media.liveStatus===2">
        <div class="living-end_tip_contain">
         <p class="title">{{media.title}}已直播结束</p>
         <p class="tips">请下载APP，前往[ 直播回顾 ]查看视频详情</p>
         <p><a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="download-app" >下载微鲸VR</a></p>
        </div>
      </section>
    </section>
  </main>
</template>
<script>
  import live from 'services/live';

  export default {
    props: {
      media: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        mediaBigPic: {
          backgroundImage: ''
        },
        barrages: [],
        barragesChange: [],
        active: 0
      };
    },
    mounted () {
      if (this.media) {
        const bigImage = this.media.poster;
        this.mediaBigPic.backgroundImage = `url(${bigImage})`;
        if (this.media.code) {
          this.init();
          setInterval(() => {
            this.init();
          }, 5000);
        }
      }
      if (this.barrages.length > 5) {
        this.animateBarrage();
      }
    },
    methods: {
      init () {
        live.liveBarrage(this.media.code).then(data => {
          if (data && data.length > 0) {
            if (data.length <= 5) {
              this.barrages = data.reverse().slice(0, 10);
            } else {
              if (this.active === 0) {
                this.barrages = data.reverse().slice(0, 10);
                this.active = 1;
              } else {
                this.barragesChange = data.reverse().slice(0, 10);
                this.active = 0;
              }
            }
          }
        });
      },
      animateBarrage () {
        const speed = 65;
        setTimeout(this.marquee, speed);
        window.requestAnimationFrame(this.animateBarrage);
      },
      marquee () {
        const barrageContain = this.$refs.barrages;
        const barrageUp = this.$refs.barragesUp;
        const barrageDown = this.$refs.barragesDown;
        if (barrageDown.offsetTop - barrageContain.scrollTop <= 0) {
          barrageContain.scrollTop -= barrageUp.offsetHeight;
        } else {
          barrageContain.scrollTop++;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .living-contains {
    position: relative;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .living-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .1);
  }
  .living-title {
    position: relative;
    z-index: 5;
    top: .45rem;
    left: .42rem;
    width: 8.4rem;
    height: 1.14rem;
    line-height: 1.15rem;
    font-size: 0;
    border-radius: 1rem;
    background: rgba(0, 0, 0, .4);
    span {
      display: inline-block;
      height: 100%;
      vertical-align: top;
    }
    .shorttitle {
      width: 5.8rem;
      height: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: .42rem;
      padding-left: .45rem;
      color: #fff;
    }
    .pipe {
      margin: 0 .26rem;
      font-size: .42rem;
      color: rgba(255, 255, 255, .55);
    }
    .num {
      font-size: .33rem;
      color: #F7D154;
    }
  }
  .living-barrage-wrapper {
    position: absolute;
    z-index: 11;
    width: 100%;
    padding-right: 1.2rem;
    height: 4rem;
    bottom: 1.8rem;
    overflow: hidden;    
  }
  .living-barrage_item {
    padding: 0 .45rem;
    margin-bottom: .25rem;
    font-size: .42rem;
    text-shadow: 0 1px 1px #222; 
    .title {
      color: #F7D154
    }
    .message {
      color: #fff;
    }    
  }
  .c-living_download {
    position: absolute;
    z-index: 10;
    bottom: .5rem;
    right: 0;
    width: 3.9rem;
    padding: .15rem .15rem .15rem .45rem;
    border-top-left-radius: .7rem;
    border-bottom-left-radius: .7rem;
    font-size: .33rem;
    text-align: center;
    background: rgba(0, 0, 0, .4);
    a {
      color: #fff;
    }
  }
  .living-end {
    position: absolute;
    z-index: 2;
    min-height: 3rem;
    top: 3.5rem;
    width: 86%;
    left: 7%;
    background: rgba(255, 255, 255, .95);
    text-align: center;
    border-radius: .15rem;
  }
  .living-end_tip_contain {
    display: inline-block;
    padding: 1rem .45rem;
    line-height: 1.57;    
    border-radius: .12rem;
    .title {
      font-size: .56rem;
    }
    .tips {
      color: #898989;
      font-size: .42rem;
    }
  }
  .download-app {
    display: inline-block;
    padding: .14rem .24rem .12rem;
    font-size: .42rem;
    color: #fff;
    background: #0F9FFF;
    border-radius: .05rem;
  }  
</style>
